<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Mall - 注册</title>
    <link rel="stylesheet" href="../assets/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="../assets/css/fontawesome-all.min.css"/>
    <link rel="stylesheet" href="../assets/css/animate.min.css"/>
    <link rel="stylesheet" href="../assets/css/magnific-popup.css"/>
    <link rel="stylesheet" href="../assets/css/nice-select.css"/>
    <link rel="stylesheet" href="../assets/css/pe-icon-7-stroke.css"/>
    <link rel="stylesheet" href="../assets/css/slick.css"/>
    <link rel="stylesheet" href="../assets/css/ui-range-slider.css"/>
    <link rel="stylesheet" href="../assets/css/meanmenu.css"/>
    <link rel="stylesheet" href="../assets/css/swipper.css"/>
    <link rel="stylesheet" href="../assets/css/main.css"/>
    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            const nickname = $("#nick-name");
            const nickNameSpan = $("#nick-name-span");
            const realName = $("#real-name");
            const realNameSpan = $("#real-name-span");
            const shipAddress = $("#ship-address");
            const shipAddressSpan = $("#ship-address-span");
            const phone = $("#phone");
            const phoneSpan = $("#phone-span");
            const password = $("#password");
            const password2 = $("#password2");
            const password2Span = $("#password2-span");
            const register = $("#register");

            nickname.focus(function () {
                nickname.css("background", "#FFFFCC");
            });
            nickname.blur(function () {
                nickname.css("background", "none");
                $.get("/api/is-unique-nickname", {"username": nickname.val()}, function (data) {
                    if (data.isUnique) {
                        nickNameSpan.css("display", "inline");
                        realName.attr("disabled", "disabled");
                        shipAddress.attr("disabled", "disabled");
                        phone.attr("disabled", "disabled");
                        password.attr("disabled", "disabled");
                        password2.attr("disabled", "disabled");
                        register.attr("disabled", "disabled");
                    }
                }, "json");
            });

            realName.focus(function () {
                realName.css("background", "#FFFFCC");
                realNameSpan.css("display", "inline");
            });
            realName.blur(function () {
                realName.css("background", "none");
                realNameSpan.css("display", "none");
            });

            shipAddress.focus(function () {
                shipAddress.css("background", "#FFFFCC");
                shipAddressSpan.css("display", "inline");
            });
            shipAddress.blur(function () {
                shipAddress.css("background", "none");
                shipAddressSpan.css("display", "none");
            });

            phone.focus(function () {
                phone.css("background", "#FFFFCC");
                phoneSpan.css("display", "inline");
            });
            phone.blur(function () {
                phone.css("background", "none");
                phoneSpan.css("display", "none");
            });

            password.focus(function () {
                password.css("background", "#FFFFCC");
            });
            password.blur(function () {
                password.css("background", "none");
            });

            password2.focus(function () {
                password2.css("background", "#FFFFCC");
            });
            password2.blur(function () {
                password2.css("background", "none");
                if (password.val() !== password2.val()) {
                    password2Span.css("display", "inline");
                    register.attr("disabled", "disabled");
                }
            });
        });
    </script>
</head>
<body>
<div class="header-area bg-black-2 d-none d-lg-block">
    <div class="header-top-2">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-xxl-3 col-lg-3">
                    <div class="header-left-2">
                        <div class="logo-2">
                            <a href="${pageContext.request.contextPath}/">
                                <img src="../assets/img/logo/logo-white.png"></a>
                        </div>
                    </div>
                </div>
                <div class="col-xxl-9 col-lg-9">
                    <div class="header-right-2 text-end">
                        <div class="epix-header-list-2 d-inline-block">
                            <ul>
                                <li>
                                    <c:choose>
                                        <c:when test="${sessionScope.username!=null}">
                                            <a style="color: white">欢迎您：${sessionScope.username}</a>
                                            <span style="color: white">/</span>
                                            <a href="${pageContext.request.contextPath}/logout" id="logout"> 注销</a>
                                        </c:when>
                                        <c:when test="${sessionScope.username==null}">
                                            <a href="${pageContext.request.contextPath}/login">登录</a>
                                            <span style="color: white">/</span>
                                            <a href="${pageContext.request.contextPath}/register"> 注册</a>
                                        </c:when>
                                    </c:choose>
                                </li>
                                <li><a href="${pageContext.request.contextPath}/cart">购物车</a></li>
                                <li><a href="${pageContext.request.contextPath}/order-list">历史订单</a></li>
                                <c:if test="${sessionScope.isAdmin==true}">
                                    <li><a href="${pageContext.request.contextPath}/goodsAll.jsp">后台</a></li>
                                </c:if>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<main>
    <div id="loading">
        <div id="loading-center">
            <div id="loading-center-absolute">
                <div class="object" id="first_object"></div>
                <div class="object" id="second_object"></div>
                <div class="object" id="third_object"></div>
            </div>
        </div>
    </div>
    <section class="login-area pt-100 pb-100">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 offset-lg-2">
                    <div class="basic-login">
                        <h3 class="text-center mb-60"> 注 册</h3>
                        <form action="${pageContext.request.contextPath}/register" method="post">
                            <label for="nick-name"><strong style="font-size: 20px;">昵称：</strong><span
                                    id="nick-name-span"
                                    style="color: red;display: none">该昵称已存在，请换一个昵称！</span></label>
                            <input id="nick-name" name="nick-name" type="text" required>
                            <label for="real-name"><strong style="font-size: 20px;">真实姓名：</strong><span
                                    id="real-name-span"
                                    style="color: #0dcaf0;display: none">这里的姓名将作为你收货时的默认收货人</span></label>
                            <input id="real-name" name="real-name" type="text" required>
                            <label for="ship-address"><strong style="font-size: 20px;">收货地址：</strong><span
                                    id="ship-address-span"
                                    style="color: #0dcaf0;display: none">这里的收货地址将作为你收货时的默认收货地址</span></label>
                            <input id="ship-address" name="ship-address" type="text" required>
                            <label for="phone"><strong style="font-size: 20px;">联系电话：</strong><span
                                    id="phone-span"
                                    style="color: #0dcaf0;display: none">这里的电话将作为你收货时的默认电话</span></label>
                            <input id="phone" name="phone" type="text" required>
                            <label for="password"><strong style="font-size: 20px;">密码：</strong></label>
                            <input id="password" name="password" type="password" required>
                            <label for="password2"><strong style="font-size: 20px;">确认密码：</strong><span
                                    id="password2-span"
                                    style="color: red;display: none">两次密码不一致，请检查！</span></label>
                            <input id="password2" name="password2" type="password" required>
                            <div class="mt-10"></div>
                            <div class="login-action mb-20 fix">
                                <span class="log-rem f-left">
                                    <input name="is-admin" id="is-admin" type="checkbox">
                                    <label for="is-admin">是否注册为管理员</label>
                                </span>
                            </div>
                            <button id="register" type="submit" class="os-btn w-100"> 立 即 注 册</button>
                            <div class="or-divide"><span>or</span></div>
                            <a href="${pageContext.request.contextPath}/login" class="os-btn os-btn-black w-100">
                                已有账号？去登录 </a>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>
<div class="footer-copyright-2" style="position: fixed;bottom: 0;width: 100%;">
    <div class="container">
        <div class="row">
            <div class="col-xxl-9 col-xl-6 col-lg-6">
                <p>Copyrights © 2021 EPIXX. All Rights Reserved.</p>
            </div>
        </div>
    </div>
</div>
<script src="../assets/js/jquery.min.js"></script>
<script src="../assets/js/bootstrap.bundle.min.js"></script>
<script src="../assets/js/isotope.pkgd.min.js"></script>
<script src="../assets/js/slick.min.js"></script>
<script src="../assets/js/swipper-bundle.min.js"></script>
<script src="../assets/js/jquery.meanmenu.min.js"></script>
<script src="../assets/js/wow.min.js"></script>
<script src="../assets/js/wow.min.js"></script>
<script src="../assets/js/jquery.elevatezoom.js"></script>
<script src="../assets/js/nice-select.js"></script>
<script src="../assets/js/jquery.scrollUp.min.js"></script>
<script src="../assets/js/jquery-ui-slider-range.js"></script>
<script src="../assets/js/countdown.min.js"></script>
<script src="../assets/js/jquery.magnific-popup.min.js"></script>
<script src="../assets/js/imagesloaded.pkgd.min.js"></script>
<script src="../assets/js/mouse-wheel.min.js"></script>
<script src="../assets/js/main.js"></script>
</body>

</html>